<template>
<el-container>
<el-main>
  <el-table
      id="exportTab"
      :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      :current-page.sync="currentPage"
      tooltip-effect="dark"
      style="width: 100%"
      >
      <!-- @selection-change="handleSelectionChange" -->
      <el-table-column
        type="selection"
        width="80">
      </el-table-column>
      <el-table-column
        prop="id"
        label="ID"
        width="120">
      </el-table-column>
      <el-table-column
        prop="username"
        label="username"
        width="160">
        <template slot-scope="scope">
          <div v-if="!scope.row.isEdit">{{ scope.row.username }}</div>
          <div v-else>
            <el-input v-model="scope.row.username"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="mail"
        label="mail"
        width="200">
        <template slot-scope="scope">
          <div v-if="!scope.row.isEdit">{{ scope.row.mail }}</div>
          <div v-else>
            <el-input v-model="scope.row.mail"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="phonenumber"
        label="phonenumber"
        width="220">
        <template slot-scope="scope">
          <div v-if="!scope.row.isEdit">{{ scope.row.phonenumber }}</div>
          <div v-else>
            <el-input v-model="scope.row.phonenumber"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="status"
        width="200">
        <template slot-scope="scope">
          <div v-if="!scope.row.isEdit">{{ scope.row.status }}</div>
          <div v-else>
            <el-input v-model="scope.row.status"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot="header" slot-scope="scope">
          <el-button type="success" size="small" @click="iconFormVisible = true">增加</el-button>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">{{ scope.row.isEdit ? '完成' : '修改' }}
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
</el-main>
<el-footer>
    <el-row :gutter='10'>
    <el-col :span='18'>
    <div style="text-align: center;margin-top: 30px;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        :page-sizes="[5, 10, 15,20]"
        :page-size="pagesize"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @current-change="current_change">
      </el-pagination>
    </div>
    </el-col>
      <el-col :span='6'>
          <div style="text-align: center;margin-top: 30px;"><ExportExcel :id="'exportTab'" :name="'导出Table'"></ExportExcel></div>
      </el-col>
    </el-row>
</el-footer>
<!-- 弹窗 -->
    <el-dialog title="新增" width="40%" :visible.sync="iconFormVisible">
      <el-form label-width="35%" :model="addInfo" class="demo-form-inline">
        <!-- <el-form-item label="ID">
          <el-input v-model="addInfo.id" placeholder="ID(要求为数字，请勿输入重复ID)"></el-input>
        </el-form-item> -->
        <el-form-item label="用户名">
          <el-input v-model="addInfo.username" placeholder="username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="addInfo.password" placeholder="password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="addInfo.mail" placeholder="mail"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="addInfo.phonenumber" placeholder="phonenumber"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="iconFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
</el-container>


</template>

<script>
import ExportExcel from "../../components/ExportExcel.vue"
export default {
components: {
    ExportExcel
},
data(){
    return{
        iconFormVisible:false,
        tableData:[],
        total: 0,
        pagesize:10,
        currentPage:1,
        addInfo:{},
    }
},
mounted(){
      this.show();
    },

    methods:{
      add(){
        console.log(this.addInfo);
        var formdata=new FormData()
        formdata.append('username',this.addInfo.username)
        formdata.append('password',this.addInfo.password)
        formdata.append('mail',this.addInfo.mail)
        formdata.append('phonenumber',this.addInfo.phonenumber)
        this.$axios.post('/api/user/regist',formdata).then(()=>{
          this.iconFormVisible = false;
          this.$message({
            type: 'success',
            message: '添加成功!请刷新页面'
          });
        }
          
        )

      },
      handleDelete(index, row){
        console.log("row:"+row.username);
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          this.$axios.get('/api/user/delete',{
          params:{
            username:row.username,
          }
        }).then(()=>{
          this.$message({
            type: 'success',
            message: '删除成功!请刷新页面'
          });
        });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        
      },
      handleEdit(index, row){
        if (row.isEdit) {
          //这是点击完成的时候
          this.$delete(row, 'isEdit');
          this.$axios.get('/api/user/alluser',{
          params:{
            methodName:'3',
            id:row.id,
            age:row.age,
            major:row.major,
            gender:row.gender,
            name:row.name
          }
        })
        } else {
          //这是点击修改按钮的时候
          this.$set(row, 'isEdit', true);
        }
      },
      current_change(currentPage){
        this.currentPage = currentPage;
      },
      handleSizeChange(val){
        this.pagesize=val;
      },
      show(){
        var that=this;
        this.$axios.get('/api/user/alluser',).then(function(response){
          var res=eval(response.data);
          that.tableData=res;
          that.total=res.length;
          console.log(that.tableData)
        }).catch(function(){
          console.log(error);
        })
       
      }
    }
}
</script>

<style>

</style>